<template>
  <div class="add-page">
    <el-dialog :visible.sync="visible" width="80%" :close-on-click-modal="false" @close="$emit('close')">
      <div slot="title" class="header flex-between">
        <div class="flex-rowl">
          <div class="flex-rowl mr10 pointer" @click="$emit('close')">
            <i class="el-icon-switch-button color-fff mr5"></i>
            <span class="color-fff size-14">关闭</span>
          </div>
          <div class="flex-rowl pointer" @click="submit('complete')" v-if="type !== 'detail'">
            <i class="el-icon-position color-fff mr5"></i>
            <span class="color-fff size-14">提交</span>
          </div>
        </div>
        <!-- <div class="flex-rowl pointer">
          <i class="el-icon-printer color-fff mr5"></i>
          <span class="color-fff size-14">打印</span>
        </div> -->
      </div>
      <div class="title">部门通知</div>
      <div>
        <div class="flex-between mt40 mb10">
          <span class="size-12">当前状态：
            <span class="str b3">审批人审批</span>
          </span>
          <span class="size-12">业务单编号：{{ formData.businessId }}</span>
        </div>
        <!-- 表单 -->
        <ZfwFormAdd :formData="formData" :fileds="fileds" ref="formAddRef">
          <template #receiptStatus>
            <div>{{ formData.receiptStatus == 1 ? '需要回执' : '不需要回执' }}</div>
          </template>
        </ZfwFormAdd>
        <div class="mt24"></div>
        <div class="mb10 size-14" v-if="Array.isArray(formData.auditItems) && formData.auditItems.length">
          处理意见</div>
        <!-- 处理意见渲染 -->
        <div class="message" v-if="Array.isArray(formData.auditItems) && formData.auditItems.length">
          <div class="flex-rowl message-item" v-for="item in formData.auditItems" :key="item.id">
            <div class="size-14 hed">审批意见</div>
            <div class="flex-1 content">
              <div class="size-14 mb8">{{ item.memo }}</div>
              <div class="flex-rowr size-14 mr10">{{ item.operatorName }} {{ item.completeTime }}</div>
            </div>
          </div>
        </div>
        <template v-if="subFileds.length">
          <ZfwFormAdd :formData="formData" :fileds="subFileds" ref="formSubAddRef" style="margin-top: 20px;" />
        </template>
        <!-- 附件表格 -->
        <div class="mt16 mb10 size-14">附件展示</div>
        <ZfwFileTable :files="formData.busiAttachs" :businessId="formData.businessId" :disabled="true" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ZfwFormAdd from "@/components/zfw-common/zfw-form-add/index"
import ZfwFileTable from "@/components/zfw-common/zfw-file-table/index.vue"
import Mixin from "../config.js"
import { getMessage, getOapproveDetail } from "@/api/notice.js"
import { replaceFormData, getIdsData, disPerson } from "@/utils/common.js"
import { formData } from "../../options"
export default {
  components: { ZfwFormAdd, ZfwFileTable },
  mixins: [Mixin],
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    id: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData,
      fileList: [],
      receiptStatus: false,//是否需要回执
    }
  },
  async created() {
    await this.getSlefPerson();
    await this.init()
  },
  methods: {
    // 获取参数
    getParams(formData) {
      let auditorIds = ""
      let auditorNames = ""
      let readerIds = ""
      let readerNames = ""
      if (formData.businessStatus === "UNDO") {
        const { idStr, nameStr } = getIdsData(formData.auditorIds, this.personSelfList, "select")
        auditorIds = idStr
        auditorNames = nameStr
      }
      if (formData.publishScope === "DESIGNEE") {
        const { idStr, nameStr } = getIdsData(formData.readerIds, this.personSelfList, "select")
        readerIds = idStr
        readerNames = nameStr
      }
      const busiAttachIds = this.fileList.map(t => t.id)
      return {
        ...formData,
        busiAttachIds: busiAttachIds.join(','),
        auditorIds,
        auditorNames,
        readerIds,
        readerNames,
        receiptStatus: this.receiptStatus ? 1 : 0
      }
    },
    // 保存
    async submit(type) {
      const params = this.getParams(this.formData)
      params.id = this.id
      const { code } = await getMessage(type, replaceFormData(params))
      if (code === 200) {
        this.$message.success("提交成功")
        this.$emit('close')
      }
    },
    // 初始化数据
    async init() {
      const { code, data } = await getOapproveDetail({ id: this.id })
      if (code === 200) {
        const datas = {
          ...data.auditInfo,
          ...data,
        }
        for (const key in this.formData) {
          this.formData[key] = datas[key]
        }
        this.formData.auditorIds = datas.auditorIds ? datas.auditorIds.split(",") : []
        this.formData.readerIds = datas.readerIds ? datas.readerIds.split(",") : []
        this.formData.publishTime = data.auditInfo.publishTime
        this.receiptStatus = this.formData.receiptStatus ? true : false
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.message {
  border: 1px solid #CFCCCC;

  .message-item {
    border-bottom: 1px solid #CFCCCC;

    &:last-child {
      border-bottom: none;
    }
  }
}

.header {
  background-color: #2D75D7;
}

.hed {
  font-weight: 700;
  color: #606266;
  width: 125px;
  text-align: right;
  padding-right: 10px;

}

.content {
  padding: 10px;
  border-left: 1px solid #CFCCCC;
}

.title {
  color: #555555;
  font-size: 24px;
  text-align: center;
}
</style>
